<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="shortcut icon" href="//gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon">
<script type="text/javascript" src="<c:url value="/js/jquery-easyui-1.5.5.6/jquery.min.js"/>"></script>
<script type="text/javascript" src="<c:url value="/js/jquery-easyui-1.5.5.6/jquery.easyui.min.js"/>"></script>
<script type="text/javascript" src="<c:url value="/js/jquery-easyui-1.5.5.6/locale/easyui-lang-zh_CN.js"/>"></script>
<link rel="stylesheet" href="<c:url value="/js/jquery-easyui-1.5.5.6/themes/icon.css"/>"/>
<link rel="stylesheet" href="<c:url value="/js/jquery-easyui-1.5.5.6/themes/default/easyui.css"/>"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>登录界面</title>
</head>
<style>
/*reset*/
*{padding: 0;margin: 0;}
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font-weight: normal;
	vertical-align: baseline;
	background: transparent;
}
article, aside, figure, footer, header, nav, section, details, summary {display: block;}
html, body { height: 100%;  color: #333; font-size: 12px; font-family: "微软雅黑",MicrosoftYaHei;}
a { text-decoration: none; color: #3cf; -webkit-tap-highlight-color: transparent;}
li{list-style: none;}
table{border-collapse: collapse;}
input {outline: medium none;font-family: "微软雅黑",MicrosoftYaHei;font-size: 14px;}
button{font-family:"微软雅黑",MicrosoftYaHei;}
em {font-style: normal;}
.wrap{max-width: 100%;min-height: 100%;overflow: hidden;margin: 0 auto;background: #ccc;}

.left{float: left;}
.right{float: right;}
.clear{clear:both;}
.red{color: #f60;}

.ececk_warning{
	font-size: 13px;
	color: red;
	width: 300px;
	margin: 0 auto;
	display: none;
}

header{
	width: 100%;
	height: 50px;
	background: #1e1b29;
	border-bottom: solid 4px red;
}
.member_wrap{
	
}
.header_item{
	overflow: hidden;
}
.user_menu{
	width: 100%;
	height: 170px;
	padding: 20px 0;
	background:url(../images/logowz.png) repeat;
}
.header_item{
	
	width: 980px;
	margin: 0 auto;
}
.menu_head{
	width: 100px;
	height: 100px;
	border-radius: 100px;
	border: solid 3px #fff;
	overflow: hidden;
}
.menu_head img{
	width: 100%;
	height: 100%;
}
.menu_info{
	width:840px;
	margin-left: 20px;	
}
.info_name{
	font-size: 18px;
	line-height: 40px;
	font-weight: bold;
	color: #fff;
}
.info_name_box{
	margin-top: 10px;
}
.level{
	font-size: 14px;
	color: #f60;
	font-weight: bold;
}
.info_desc{
	margin-top: 10px;
	font-size: 14px;
	color: #FFF;
}
.banner_menu{
	width: 980px;
	height: 50px;
	margin: 20px auto;
	background: #fff;
}


.nav_box{
	margin-top: 50px;
}
.nav_box ul {
	overflow: hidden;
}
.nav_box ul li{
	display: block;
	padding: 0 20px;
}
.nav_box ul li a{
	color: #fff;
	font-size: 16px;
}
.nav_box ul li a:hover{
	color: red;
}





.login_wrap{
	background: url("/hr/images/logo_bg.jpg") no-repeat center;
	background-size: 100%;
}
.logo{
	width: 500px;
	height: 150px;
	margin: 0px auto;
	background: url(/hr/images/logowz.png) no-repeat center;
}
.login_box{
	width: 360px;
	background: #FFFFFF;
	margin: 0px auto;
}
.login_title{
	font-size: 25px;
	text-align: center;
	color: #FF7F50;
	padding: 15px 0;
	width: 300px;
	margin: 0 auto;
	border-bottom: solid 1px #CCCCCC;
}
.form_text_ipt{
	width: 300px;
	height: 40px;
	margin: 20px auto 0 auto;
	background: #FFFFFF;
}
.form_check_ipt{
	width: 300px;
	margin:  10px auto;
	overflow: hidden;
}
.form_text_ipt input{
	width: 290px;
	height: 30px;
	margin: 5px;
	border: none;
	font-family: "微软雅黑";
	font-size: 15px;
	color: #666;
}
.check_left label{
	cursor: pointer;
}
.check_left label input{
	position: relative;
	top: 2px;
}
.form_btn{
	width: 300px;
	height: 40px;
	margin:  40px auto;
}
.form_btn input{
	width: 100%;
	height: 100%;
	border: none;
	color: #FFFFFF;
	font-size: 14px;
	background: #FF7F50;
	cursor: pointer;
}
.form_reg_btn{
	width: 300px;
	margin: 0 auto;
	font-size: 14px;
	color: #666;
}
.other_login{
	overflow: hidden;
	width: 300px;
	height: 10px;
	line-height: 80px;
	margin: 0px auto;
}
.other_left{
	font-size: 14px;
	color: #999;
}

.other_right a{
	margin:5px;
	color:#636363;
}

.other_right a:hover{
	color:#AEEEEE;
}

	.zhcw{
		width:200px;
		height:60px;
		background: #B8F5B7;
		line-height: 60px;
		position: absolute;
		margin-left:90px;
		border-radius:20px;
		margin-top:-100px;
		z-index: 99;
		display: none;
	}
		.zhcw2{
		width:200px;
		height:60px;
		background: #B8F5B7;
		line-height: 60px;
		position: absolute;
		margin-left:90px;
		border-radius:20px;
		margin-top:-100px;
		z-index: 99;
		display: none;
	}
.zhcw3{
		width:200px;
		height:60px;
		background: #B8F5B7;
		line-height: 60px;
		position: absolute;
		margin-left:90px;
		border-radius:20px;
		margin-top:-100px;
		z-index: 99;
		display: none;
	}
	.zhcw4{
		width:220px;
		height:60px;
		background: #B8F5B7;
		line-height: 60px;
		position: absolute;
		margin-left:70px;
		border-radius:20px;
		margin-top:-100px;
		z-index: 99;
		display: none;
	}
	
.zhcw5{
		width:320px;
		height:60px;
		background: #B8F5B7;
		line-height: 60px;
		position: absolute;
		margin-left:20px;
		border-radius:20px;
		margin-top:-100px;
		z-index: 99;
		display: none;
	}

</style>
<body>
					
		<div class="wrap login_wrap">
			<div class="content">
				<div class="logo"></div>
				<div class="login_box">	
							<div class="zhcw" id="div">
								<a style="margin-left:40px;font-size:20px;">请输入用户名</a>
							</div>
							<div class="zhcw2" id="div2">
								<a style="margin-left:30px;font-size:20px;">请输入登陆密码</a>
							</div>
							<div class="zhcw3" id="div3">
								<a style="margin-left:37px;font-size:20px;">请输入验证码</a>
							</div>
							<div class="zhcw4" id="div4">
								<a style="margin-left:10px;font-size:20px;">验证码错误请重新输入</a>
							</div>
							<div class="zhcw5" id="div5">
								<a id="pd" style="margin-left:20px;font-size:20px;">${pd}</a>
							</div>
					<div class="login_form">
						<div class="login_title">
							登录
						</div>
						<form action="login_yanzheng" method="post">
							
							<div class="form_text_ipt">
								<input class="easyui-textbox " name="name"  data-options="width:300,height:40,validType:'mobile',prompt:'请输入用户名'">
							</div>
							<div class="form_text_ipt">
								<input class="easyui-passwordbox " name="pwd"  data-options="width:300,height:40,validType:'mobile',prompt:'请输入密码'">
							</div>
							
							<div class="form_text_ipt">
								<input class="easyui-textbox " id="code_input" name="piccode"  name="yzm"  data-options="width:180,height:40,validType:'mobile',prompt:'请输入验证码'">
								<a id="v_container" style="width: 100px;height: 40px;float:right;"></a>
							</div>
							
							<div class="form_btn">
								<input type="submit" value="登录" id="my_button" onclick="return check(this.form)">
							</div>
							<div class="form_reg_btn">
							</div>
						</form>
						<div class="other_login">
							
						</div>
					</div>
				</div>
			</div>
		</div>
	
		
	</body>
	<script src="js/gVerify.js"></script>
	<script type="text/javascript">
	var verifyCode = new GVerify("v_container");
	
	//用户名密码错误提示
	var pd=$('#pd').text();
	if(pd!=''){
		$('.zhcw5').css('display','block');
		 hiddenDiv5();
	}else{
		$('.zhcw5').css('display','none');
	}
	
	
		//表单提交
		function check(form) {
	        if(form.name.value=='') {
	             $('.zhcw').css('display','block');
	              hiddenDiv2();
	              form.name.focus();
	              return false;
	         }
	         if(form.pwd.value==''){
	        	 $('.zhcw2').css('display','block');
	              form.pwd.focus();
	              hiddenDiv();
	              return false;
	           }
	         if(form.piccode.value==''){
	        	 $('.zhcw3').css('display','block');
	        	  hiddenDiv3();
	        	 return false;
	         }else{
	        	 var res = verifyCode.validate(document.getElementById("code_input").value);
		     		if(res){
		     			return true;
		     		}else{
		     			 $('.zhcw4').css('display','block');
			        	  hiddenDiv4();
			        	  $('#code_input').textbox('setValue','');
		     			return false; 	
		     		}
	         }
	        
	           return true;
	   	}
		function hiddenDiv2(){
			setTimeout("document.getElementById(\"div\").style.display=\"none\"",1000);
		}
		function hiddenDiv(){
			setTimeout("document.getElementById(\"div2\").style.display=\"none\"",1000);
		}
		
		function hiddenDiv3(){
			setTimeout("document.getElementById(\"div3\").style.display=\"none\"",1000);
		}
		function hiddenDiv4(){
			setTimeout("document.getElementById(\"div4\").style.display=\"none\"",1000);
		}
		function hiddenDiv5(){
			setTimeout("document.getElementById(\"div5\").style.display=\"none\"",3000);
		}
	
		
	</script>
</html>